<template>
  <div id="app">
    <div >
      <input id="uploadBtn" type="file" @change="loadExcel" />

      <span>或加载远程Excel文件:</span>

      <select v-model="selected" @change="selectExcel">
        <option disabled value="">请选择</option>
        <option v-for="option in options" :key="option.text" :value="option.value">
          {{ option.text }}
        </option>
      </select>

<!--      <a href="javascript:void(0)" @click="downloadExcel">下载xlsx文件</a>-->
    </div>
    <div>
      <button @click="getData" title="打印 当前 workbook 数据到控制台">获取数据</button>
      <button @click="destroy">销毁</button>
      <button @click="show">显示</button>
    </div>
    <UniverSheet v-if="isShow && data !== null" id="sheet" ref="univerRef" :data="data"/>
  </div>
</template>

<script setup lang="ts">
import UniverSheet from './UniverSheet.vue'
// import {DEFAULT_WORKBOOK_DATA} from '../assets/default-workbook-data'
import {ref} from 'vue';
import {HandleZip} from "@/utils/handleZip/HandleZip";
import {IuploadfileList} from "@/utils/handleZip/ICommon";
import {LuckyFile} from "@/utils/handleZip/ToLuckySheet/LuckyFile";
import {luckyToUniver} from "@/utils/luckyToUniver/core/lucky-to-univer";
import {luckyJson} from "@/utils/luckyToUniver/data/demo-feature";
import {exportExcel} from "@/utils/luckyToUniver/export";

// const data = ref(DEFAULT_WORKBOOK_DATA);
// const univerData = luckyToUniver(luckyJson);
const data = ref(null);
const univerRef = ref<InstanceType<typeof UniverSheet> | null>(null);
const isShow = ref(true);
const isMaskShow = ref(false)
const selected = ref('')
let jsonData = null
const options = ref([
  { text: '资金管理器xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/money-manager-2.xlsx' },
  {
    text: '活动成本跟踪器.xlsx',
    value: 'https://minio.cnbabylon.com/public/luckysheet/Activity%20costs%20tracker.xlsx'
  },
  {
    text: '房屋清洁检查表.xlsx',
    value: 'https://minio.cnbabylon.com/public/luckysheet/House%20cleaning%20checklist.xlsx'
  },
  {
    text: '学生作业计划.xlsx',
    value: 'https://minio.cnbabylon.com/public/luckysheet/Student%20assignment%20planner.xlsx'
  },
  {
    text: '信用卡跟踪器.xlsx',
    value: 'https://minio.cnbabylon.com/public/luckysheet/Credit%20card%20tracker.xlsx'
  },
  { text: '蓝色时间表.xlsx', value: 'https://minio.cnbabylon.com/public/luckysheet/Blue%20timesheet.xlsx' },
  {
    text: '学生日历（周一）.xlsx',
    value: 'https://minio.cnbabylon.com/public/luckysheet/Student%20calendar%20%28Mon%29.xlsx'
  },
  {
    text: '蓝色里程和费用报告.xlsx',
    value: 'https://minio.cnbabylon.com/public/luckysheet/Blue%20mileage%20and%20expense%20report.xlsx'
  }
])
const loadExcel = (evt) => {
  const files = evt.target.files
  if (files == null || files.length == 0) {
    alert('No files wait for import')
    return
  }

  let name = files[0].name
  let suffixArr = name.split('.'),
      suffix = suffixArr[suffixArr.length - 1]
  if (suffix != 'xlsx') {
    alert('Currently only supports the import of xlsx files')
    return
  }
  const handleZip:HandleZip = new HandleZip(files[0]);
  handleZip.unzipFile( function(files:IuploadfileList) {
        let luckyFile = new LuckyFile(files, 'xlsx.xlsx');
        let luckysheetfile = luckyFile.Parse();
        let exportJson = JSON.parse(luckysheetfile);
        // 使用转换的资源
        // const univerData = luckyToUniver(exportJson);
        // 采用前端方式
        const luckySheetJson = {
          container: 'luckysheet', //luckysheet is the container id
          lang: "zh",
          showtoolbarConfig:{
            image: true,
            print: true, //关闭打印按钮  启用也不能用 等以后看情况而定
            exportXlsx: true, //关闭导出按钮  启用也不能用  等以后看情况而定
          },
          allowCopy: true, // 是否允许拷贝
          showtoolbar: true, // 是否显示工具栏
          showinfobar: false, // 是否显示顶部信息栏
          // myFolderUrl: "/",//作用：左上角<返回按钮的链接
          showsheetbar: true, // 是否显示底部sheet页按钮
          showstatisticBar: true, // 是否显示底部计数栏
          sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
          allowEdit: true, // 是否允许前台编辑
          enableAddRow: false, // 允许增加行
          enableAddCol: false, // 允许增加列
          userInfo: false, // 右上角的用户信息展示样式
          showRowBar: true, // 是否显示行号区域
          showColumnBar: false, // 是否显示列号区域
          sheetFormulaBar: false, // 是否显示公式栏
          enableAddBackTop: true,//返回头部按钮
          forceCalculation: false, //下面是导出插件 默认关闭
          data: exportJson.sheets,
          title: exportJson.info.name,
          userInfo: exportJson.info.name.creator,
        }
        const univerData = luckyToUniver(luckySheetJson);
        data.value = univerData
        jsonData = luckySheetJson
      })

  console.log(univerRef.value?.univerAPI)
  // LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
  //   if (exportJson.sheets == null || exportJson.sheets.length == 0) {
  //     alert('Failed to read the content of the excel file, currently does not support xls files!')
  //     return
  //   }
  //   console.log('exportJson', exportJson)
  //   jsonData.value = exportJson
  //
  //   window.luckysheet.destroy()
  //
  //   window.luckysheet.create({
  //     container: 'luckysheet', //luckysheet is the container id
  //     showinfobar: false,
  //     data: exportJson.sheets,
  //     title: exportJson.info.name,
  //     userInfo: exportJson.info.name.creator
  //   })
  // })
}
const selectExcel = (evt) => {
  const value = selected.value
  const name = evt.target.options[evt.target.selectedIndex].innerText

  if (value == '') {
    return
  }
  isMaskShow.value = true
  const handleZip:HandleZip = new HandleZip();
  handleZip.unzipFileByUrl(
      value
      , function(files:IuploadfileList) {
        let luckyFile = new LuckyFile(files, 'xlsx.xlsx');
        let luckysheetfile = luckyFile.Parse();
        let exportJson = JSON.parse(luckysheetfile);

        // 使用转换的资源
        // const univerData = luckyToUniver(exportJson);
        // 采用前端方式
        const luckySheetJson = {
          container: 'luckysheet', //luckysheet is the container id
          lang: "zh",
          showtoolbarConfig:{
            image: true,
            print: true, //关闭打印按钮  启用也不能用 等以后看情况而定
            exportXlsx: true, //关闭导出按钮  启用也不能用  等以后看情况而定
          },
          allowCopy: true, // 是否允许拷贝
          showtoolbar: true, // 是否显示工具栏
          showinfobar: false, // 是否显示顶部信息栏
          // myFolderUrl: "/",//作用：左上角<返回按钮的链接
          showsheetbar: true, // 是否显示底部sheet页按钮
          showstatisticBar: true, // 是否显示底部计数栏
          sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
          allowEdit: true, // 是否允许前台编辑
          enableAddRow: false, // 允许增加行
          enableAddCol: false, // 允许增加列
          userInfo: false, // 右上角的用户信息展示样式
          showRowBar: true, // 是否显示行号区域
          showColumnBar: false, // 是否显示列号区域
          sheetFormulaBar: false, // 是否显示公式栏
          enableAddBackTop: true,//返回头部按钮
          forceCalculation: false, //下面是导出插件 默认关闭
          data: exportJson.sheets,
          title: exportJson.info.name,
          userInfo: exportJson.info.name.creator,
        }
        const univerData = luckyToUniver(luckySheetJson);
        data.value = univerData
        jsonData = luckySheetJson
      })
  // LuckyExcel.transformExcelToLuckyByUrl(value, name, (exportJson, luckysheetfile) => {
  //   if (exportJson.sheets == null || exportJson.sheets.length == 0) {
  //     alert('Failed to read the content of the excel file, currently does not support xls files!')
  //     return
  //   }
  //   console.log('exportJson', exportJson)
  //   jsonData.value = exportJson
  //
  //   isMaskShow.value = false
  //   window.luckysheet.destroy()
  //
  //   window.luckysheet.create({
  //     container: 'luckysheet', //luckysheet is the container id
  //     showinfobar: false,
  //     data: exportJson.sheets,
  //     title: exportJson.info.name,
  //     userInfo: exportJson.info.name.creator
  //   })
  // })
}

const getData = () => {
  const result = univerRef.value?.getData();
  console.log(JSON.stringify(result, null, 2));
}
const downloadExcel =async () => {
  // const value = selected.value;;
  //
  // if(value.length==0){
  //     alert("Please select a demo file");
  //     return;
  // }
  //
  // var elemIF = document.getElementById("Lucky-download-frame");
  // if(elemIF==null){
  //     elemIF = document.createElement("iframe");
  //     elemIF.style.display = "none";
  //     elemIF.id = "Lucky-download-frame";
  //     document.body.appendChild(elemIF);
  // }
  // elemIF.src = value;
  // console.log(jsonData.data)
  // exportExcel(jsonData.data, '下载')
}

const destroy = () => {
  isShow.value = false;
}

const show = () => {
  isShow.value = true;
}

</script>

